<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>


<body>
  <div class="container">
    <nav class="navbar navbar-default navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">全能网后台管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="./index.html">用户管理<span class="sr-only">(current)</span></a></li>
            <li><a href="./product.html">商品管理</a></li>
            <li><a href="#">地址管理</a></li>
            <li><a href="./category.html">分类管理</a></li>
            <li><a href="#">售后管理</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search" id="searchText">
            </div>
            <button type="submit" class="btn btn-default" id="searchBtn">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!---用户管理模块 ------------------------------------------------------------------------------------------------------------ -->
    <table class="table table-hover table-bordered able-striped">
      <thead>
        <tr>
          <th>用户名</th>
          <th>手机号</th>
          <th>身份</th>
          <th>注册日期</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="mybody">
        <!-- <tr>
          <td>用户名</td>
          <td>手机号</td>
          <td>身份</td>
          <td>注册日期</td>
          <td>状态</td>
          <td>
            <button>删除</button> <button>冻结</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <!-- 分页器 -->
    <nav aria-label="Page navigation">
      <ul class="pagination">


      </ul>
    </nav>
  </div>


  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script>
    function show(page = 1, username) {
      $.ajax({
        url: "http://127.0.0.1:3000/users/all",
        type: "post",
        data: {
          username: username,
          page: page //传给后端的分页
        },
        success: function (res) {
          console.log(res)

          // 渲染页数-----------------------------------------------------
          var pageCount = res.pageCount;//4
          var pageStr = ` <li class="prevEle">
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>`
          for (var i = 1; i <= pageCount; i++) {
            pageStr += `<li class="mypage"><a href="#">${i}</a></li>`
          }
          pageStr += ` <li class="nextEle" >
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>`
          console.log(page)
          $(".pagination").html(pageStr)
          // 
          $(".mypage").eq(page - 1).addClass("active").siblings().removeClass("active");
          // 分页点击---------------
          $(".mypage").click(function () {
            show($(this).children(0).html()) //调用渲染方法  发送页码给后端

          })
          // 点击前一页
          $(".prevEle").click(function () {
            console.log($(".pagination .active").html())
            var pages = $(".pagination .active").find("a").html() - 1
            if (pages <= 0) {
              pages = 1;
              alert("当前是第一页")
            }
            show(pages)
          })
          // 点击后一页
          $(".nextEle").click(function () {
            console.log($(".pagination .active").html())
            var pages = parseInt($(".pagination .active").find("a").html()) + 1
            console.log(pages)
            if (pages > pageCount) {
              pages = pageCount;
              alert("当前最后一页")
            }
            show(pages)
          })
          // ----------------------------------------------------------------------

          var str = ``;
          $.each(res.data, function (index, ele) {
            str += ` <tr>
                <td>${ele.username}</td>
                <td>${ele.phone}</td>
                <td>${ele.power}</td>
                <td>${new Date(ele.createAt).toLocaleString()}</td>
                <td>${ele.freeze == 'true' ? '冻结中' : '正常使用'}</td>
                <td>
                  <button class="btn btn-danger" onclick="del('${ele._id}')">删除</button> <button   onclick="freeze('${ele._id}','${ele.freeze}')" class="btn ${ele.freeze == 'true' ? 'btn-primary' : 'btn-success'}">${ele.freeze == 'true' ? '解冻' : '冻结'}</button>
                </td>
              </tr>`
          })
          $("#mybody").html(str)
        }
      })
    }
    show()
    // 删除方法
    function del(id) {
      $.ajax({
        url: "http://127.0.0.1:3000/users/del",
        type: "post",
        data: {
          id: id
        },
        success: function () {
          show()
        }
      })
    }

    // 冻结
    function freeze(id, status) {
      console.log(id, status)
      var mystr = status == 'true' ? 'false' : 'true';
      $.ajax({
        url: "http://127.0.0.1:3000/users/freeze",
        type: "post",
        data: {
          id: id,
          freeze: mystr
        },
        success: function (res) {
          alert(res.success)
          show();
        }
      })
    }
    // 搜索功能
    $("#searchBtn").click(function () {

      console.log($("#searchText").val())
      show(1, $("#searchText").val())
      return false;
    })
  </script>
</body>


</html>